<html>

<body>
<style type="text/css">
.tabSelected
{
    FONT-SIZE: 16px;
    COLOR: #008330;
    FONT-FAMILY: Arial;
	font-weight: bold;
	text-decoration: none;
	text-align: right;
	line-height: 30px;
	cursor: hand;
	
}
.tabSelectedOver
{
   FONT-SIZE: 16px;
    COLOR: #000000;
    FONT-FAMILY: Arial;
	font-weight: bold;
	TEXT-DECORATION: none;
	text-align: right;
	line-height: 30px;
	cursor: hand;
	
}
.tabNotSelected
{

   FONT-SIZE: 16px;
    COLOR: #AAAAAA;
    FONT-FAMILY: Arial;
	font-weight: bold;
	text-decoration: none;
	background-color: green;
	line-height: 30px;
	text-align: right;

	
}
.tabNotSelectedOver
{
   FONT-SIZE: 16px;
    COLOR: #02200b;
    FONT-FAMILY: Arial;
	font-weight: bold;
	text-decoration: none;
	text-align: right;
	line-height: 30px;
	cursor: hand;
	
}

</style>

<script>
function changeScreen(divNum)
{
	if(divNum==1)
	{
		document.all.queryData.style.display = '';
		document.all.queryResult.style.display = 'none';
		document.all.resultMap.style.display = 'none';

	}
	else if(divNum==2)
	{
		document.all.queryData.style.display = 'none';
		document.all.queryResult.style.display = '';
		document.all.resultMap.style.display = 'none';

	}
	else if(divNum==3)
	{
		document.all.queryData.style.display = 'none';
		document.all.queryResult.style.display = 'none';
		document.all.resultMap.style.display = '';

	}
	return;
}
function submitForm()
{
	 
	document.all.queryDataForm.submit();
}
</script>
<table border="1" height="520" width="400" scrolling="false" cellspacing="0" cellpadding="0" dir="RTL" align="right">
	<tr align="right" valign="top" height="30" width="400">
		<td class="tabNotSelected" onClick="changeScreen(1)" onMouseOver="this.className='tabSelectedOver'" onMouseOut="this.className='tabNotSelected'">Drive Details
		</td>
		<td class="tabNotSelected" onClick="changeScreen(2)" onMouseOver="this.className='tabSelectedOver'" onMouseOut="this.className='tabNotSelected'">More
		</td>
		<td class="tabNotSelected" onClick="changeScreen(3)" onMouseOver="this.className='tabSelectedOver'" onMouseOut="this.className='tabNotSelected'">Map
		</td>
	</tr>
	<tr valign="top" align="right">
		<td colspan="3">
			<div id="queryData" >
				<form name="queryDataForm" method="post" action="http://drive-costing-server.appspot.com/find">
					<table valign="top">
						<tr>
							<td>Origin</td>
							<td>
								<input type="text" name="Source" tabindex="1">
							</td>
						</tr>
						<tr>
							<td>Destination</td>
							<td>
								<input type="text" name="Destination" tabindex="2">
							</td>
						</tr>
						<tr>
							<td>Car Company</td>
							<td>
								<input type="text" name="company" tabindex="3">
							</td>
						</tr>
						<tr>
							<td>Car Model</td>
							<td>
								<input type="text" name="model" tabindex="4">
							</td>
						</tr>
						<tr>
							<td>Year</td>
							<td>
								<input type="text" name="year" tabindex="5">
							</td>
						</tr>
						<tr>
							<td>Car Load</td>
							<td>
								<input type="text" name="CargoWeight" tabindex="6">
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<table>
									<tr>
										<td>
											Automatic Gear
										</td>
										<td>
											<input Name="isManual" type="radio" value="0" tabindex="7">
										</td>
										<td>
											Manual Gear
										</td>
										<td>
											<input Name="isManual" type="radio" value="1" tabindex="8">
										</td>
									<tr>
								</table>
							</td>
						</tr>
						<tr>
                                                        <td>Fuel Price (Per Liter) [nis]:</td>
                                                        <td> <input type="text" name="price" value = "0" tabindex="9"/> </td>
                                                </tr>

                                                <tr>
                                                <td>Highway Length [km]:</td>
                                                <td> <input type="text" name="h_length" value = "0" tabindex="10"/> </td>
                                                </tr>

                                                <tr>
                                                <td>Urban Length [km]:</td>
                                                <td> <input type="text" name="l_length" value = "0" tabindex="11"/> </td>
                                                </tr>   
						
						<tr>
							<td colspan="2">
								<table>
									<tr>
										<td>
											<a href="javascript: submitForm();">Find Drive Cost</a>
										</td>
									<tr>
								</table>
							</td>
						</tr>
					</table>
				
				</form>
			</div>
			<div id="queryResult" style="display: none;">
			queryResult
			</div>
			<div id="resultMap" style="display: none;">
			resultMap
			</div>
		</td>
	</tr>
</table>
<body/>
</html>